<template>
  <!-- <view class="matchmaker-page">
    <view class="page-header">
      <view class="text-2xl font-bold text-center">红娘列表</view>
      <view class="text-sm text-gray-500 text-center mt-1">专业红娘为您牵线搭桥</view>
    </view>
  </view> -->

  <div class="w-[750rpx]">
    <!-- 头部 -->
    <div class="bg-white p-4">
      <h1 class="text-[32rpx] text-[#333]">红娘</h1>
    </div>

    <!-- 红娘信息 -->
    <div class="bg-white p-4 mt-4 rounded-lg">
      <img :src="pic" alt="红娘照片" class="w-full h-[400rpx] object-cover rounded-lg">
      <div class="flex justify-end">
        <van-button type="primary" size="small" class="bg-[#e6f7ff] text-[#1890ff] border-none">译</van-button>
      </div>
      <p class="text-center text-[24rpx] mt-4">老六</p>
    </div>

    <!-- 按钮组 -->
    <div class="flex justify-around mt-4">
      <van-button type="primary" size="large" class="w-[200rpx] bg-[#1890ff] text-white">红娘电话</van-button>
      <van-button type="success" size="large" class="w-[200rpx] bg-[#52c41a] text-white">红娘微信</van-button>
      <van-button type="danger" size="large" class="w-[200rpx] bg-[#ff4d4f] text-white">在线咨询</van-button>
    </div>

    <!-- 红娘简介 -->
    <div class="bg-white p-4 mt-4 rounded-lg">
      <h2 class="text-[24rpx] text-[#333] mb-2">红娘简介</h2>
      <p class="text-[16rpx] text-[#666]">
        资深红娘，专注婚恋服务10年，凭借敏锐的洞察力，精准匹配单身人士。至今已成功促成100对恋人牵手，用真诚与耐心全程陪伴，助力大家遇见美好爱情，迈向幸福人生！
      </p>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 w-full bg-white shadow-lg">
      <van-tabbar>
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="like-o">活动</van-tabbar-item>
        <van-tabbar-item icon="contact" dot>红娘客服</van-tabbar-item>
        <van-tabbar-item icon="star-o">收藏</van-tabbar-item>
        <van-tabbar-item icon="contact">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup lang="ts">
// 红娘页面逻辑
import pic from './kunkun.jpg'
</script>

<style lang="scss" scoped>
.matchmaker-page {
  min-height: 100vh;
  background: #f8fafc;
}

.page-header {
  @apply bg-white shadow-sm p-4 mb-4;
}
</style>